<template>
    <div class="select" style="width: 100%;" >
        <div
            v-for="(item, index) in localClassTeachers"
            :key="index"
            style="width: 100%; display: flex; align-items: center"
        >
            <el-select
                v-model="item.id"
                placeholder="请选择班级教师"
                filterable
                style="margin-bottom: 8px; flex: 1;"
                @change="handleTeacherChange(item, $event)"
            >
                <el-option
                v-for="teacher in tescheListArr"
                :key="teacher.id"
                :label="teacher.nickname"
                :value="teacher.id"
                />
            </el-select>
            <CurrencyButton
                title="删除"
                type="primary"
                :text="true"
                class="visitor-cycle-item-button"
                @click="localClassTeachers.splice(index, 1); emit('change', localClassTeachers)"
            />
        </div>
        <CurrencyButton
            icon="DsrzAdd"
            title="添加教师"
            type="primary"
            @click="localClassTeachers.push({}); emit('change', localClassTeachers)"
        />
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, useAttrs, watch, type PropType, nextTick, onMounted } from 'vue';

// 定义教师数据类型
interface Teacher {
    id: number
    nickname: string
    label: string
    value: number
}

// 定义班级教师数据类型
interface ClassTeacher {
    id?: number
    nickname?: string
    label?: string
}

const props = defineProps({
    tescheListArr: {
        type: Array as PropType<Teacher[]>,
        default: () => ([])
    },
    classTeachers: {
        type: Array as PropType<ClassTeacher[]>,
        default: () => ([])
    },
})

const emit = defineEmits(['change'])

// 创建本地响应式数据来管理教师列表
const localClassTeachers = ref<ClassTeacher[]>([])

// 处理教师选择变化
const handleTeacherChange = (item: ClassTeacher, teacherId: number) => {
    // 根据选中的ID找到对应的教师信息
    const selectedTeacher = props.tescheListArr.find((teacher: Teacher) => teacher.id === teacherId)
    
    // 更新当前项的数据
    Object.assign(item, {
        id: teacherId,
        nickname: selectedTeacher?.nickname || '',
        label: selectedTeacher?.label || ''
    })
    
    // 向父组件发送变化事件，传递所有选中的教师数据
    emit('change', localClassTeachers.value)
}

// 监听 classTeachers 变化，实现数据回显
watch(() => props.classTeachers, (newClassTeachers) => {
    if (newClassTeachers && newClassTeachers.length > 0) {
        // 深拷贝数据到本地
        const processedTeachers = newClassTeachers.map((classTeacher: ClassTeacher) => {
            const teacherData = { ...classTeacher }
            if (classTeacher.id) {
                // 根据ID在教师列表中找到对应的完整信息
                const teacherInfo = props.tescheListArr.find((teacher: Teacher) => teacher.id === classTeacher.id)
                if (teacherInfo) {
                    // 补充完整信息
                    Object.assign(teacherData, {
                        nickname: teacherInfo.nickname,
                        label: teacherInfo.label
                    })
                }
            }
            return teacherData
        })
        localClassTeachers.value = processedTeachers
    } else {
        localClassTeachers.value = []
    }
}, { immediate: true, deep: true })


</script>